<template>

  <div class="login">
    <div class="mylogin" align="center">
      <h4>个人用户注册</h4>
      <el-form
          :model="loginForm"
          :rules="loginRules"
          ref="loginForm"
          label-width="60px"
          label-position="right"
      >
        <el-form-item label="userId:" prop="userId" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="userId"
                  type="text"
                  placeholder="请输入userId"
                  v-model="loginForm.userId"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="nickname:" prop="nickname" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="nickname"
                  type="text"
                  placeholder="请输入nickname"
                  v-model="loginForm.nickname"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="password" prop="password" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-lock"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="password"
                  type="password"
                  placeholder="请输入密码"
                  v-model="loginForm.password"
              ></el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="avatar:" prop="avatar" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="avatar"
                  type="text"
                  placeholder="请输入avatar"
                  v-model="loginForm.avatar"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="createDate:" prop="createDate" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="createDate"
                  type="text"
                  placeholder="请输入createDate"
                  v-model="loginForm.createDate"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="email:" prop="email" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="email"
                  type="text"
                  placeholder="请输入email"
                  v-model="loginForm.email"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="mobilePhoneNumber:" prop="mobilePhoneNumber" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="mobilePhoneNumber"
                  type="text"
                  placeholder="请输入mobilePhoneNumber"
                  v-model="loginForm.mobilePhoneNumber"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="ip:" prop="ip" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="ip"
                  type="text"
                  placeholder="请输入家庭住址"
                  v-model="loginForm.ip"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="school:" prop="school" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="school"
                  type="text"
                  placeholder="请输入school"
                  v-model="loginForm.school"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="major:" prop="major" style="margin-top: 10px;margin-left: 80px">
          <el-row>
            <el-col :span="2">
              <span class="el-icon-s-custom"></span>
            </el-col>
            <el-col :span="22">
              <el-input
                  class="inps"
                  name="major"
                  type="text"
                  placeholder="请输入major"
                  v-model="loginForm.major"
              >
              </el-input>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item style="margin-top: 55px;margin-left: 80px">
          <el-button type="primary" round class="submitBtn" @click="submitRegister" color="whrite"
          >注册
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</template>

<script>

import request from "@/utils/request";
import router from "@/router";

export default {

  name: "RegisterView",

  components: {
    request
  },

  // 数据
  data(){
    return {
      loginForm: {
        userId: '',
        nickname: '',
        password: '',
        avatar: '',
        createDate: new Date().getFullYear()+"-"+(new Date().getMonth()+1).toString().padStart(2,'0')+"-"+new Date().getDate().toString().padStart(2,'0')+" "+new Date().getHours().toString().padStart(2,'0')+":"+new Date().getMinutes().toString().padStart(2,'0')+":"+new Date().getSeconds().toString().padStart(2,'0'),
        email: '',
        mobilePhoneNumber: '',
        ip: '',
        school: '',
        major: '',
      },
      loginRules: {
        userId: [{ required: true, message: "请输入id", trigger: "blur" }],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        avatar: [{ required: false, message: "请设置头像", trigger: "blur" }],
        email: [{ required: false, message: "请输入邮件", trigger: "blur" }],
        mobilePhoneNumber: [{ required: false, message: "请输入电话", trigger: "blur" }],
        ip: [{ required: false, message: "请输入家庭住址", trigger: "blur" }],
        school: [{ required: false, message: "请输入学校", trigger: "blur" }],
        major: [{ required: false, message: "请输入专业", trigger: "blur" }],
      }
    }
  },

//  方法
  methods:{
    submitRegister(){
      request.post("/security/userRegister/",this.loginForm).then(res=>{
        console.log(res.data)
        if (res.data==500){
          alert("请重新注册！")
          router.push("/RegisterView")
        }else {
          alert("注册成功！")
          router.push("/AdminLoginView")
        }
      })

    },
  }


}
</script>

<style>
.login {
  width: 100vw;
  padding: 0;
  margin: 0;
  height: 100vh;
  font-size: 16px;
  background: #242645;
  color: #fff;
}

.mylogin {
  width: 600px;
  height:700px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 50px 40px 40px 40px;
  box-shadow: -15px 15px 15px rgba(6, 17, 47, 0.7);
  opacity: 1;
  background: linear-gradient(
      230deg,
      rgba(53, 57, 74, 0) 0%,
      rgb(0, 0, 0) 100%
  );
}

.inps input {
  border: none;
  color: midnightblue;
  background-color: transparent;
  font-size: 12px;
}

.submitBtn {
  background-color: transparent;
  color: #39f;
  width: 100%;
  height: 100%;
}
</style>